<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { isRegist, LoginFormData, loginForm } = storeToRefs(userStore);
const { goToLogin, goToRegist, register, rules, login } = userStore;
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside></el-aside>
      <el-main>
        <!-- 登录表单 -->
        <el-form
          v-if="!isRegist"
          :model="LoginFormData"
          :rules="rules"
          ref="loginForm"
        >
          <el-form-item><h1>登录</h1></el-form-item>
          <el-form-item prop="username"
            ><el-input
              v-model="LoginFormData.username"
              :prefix-icon="User"
              placeholder="请输入用户名"
          /></el-form-item>
          <el-form-item prop="password"
            ><el-input
              v-model="LoginFormData.password"
              :prefix-icon="Lock"
              placeholder="请输入密码"
          /></el-form-item>
          <el-form-item>
            <el-checkbox size="large">记住我</el-checkbox>
            <span class="forget">忘记密码?</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login()"
              >登录</el-button
            ></el-form-item
          >
          <el-form-item>
            <h2 @click="goToRegist()">注册➡</h2>
          </el-form-item>
        </el-form>
        <!-- 注册表单 -->
        <el-form
          ref="loginForm"
          v-if="isRegist"
          :model="LoginFormData"
          :rules="rules"
        >
          <el-form-item><h1>注册</h1></el-form-item>
          <el-form-item prop="username"
            ><el-input
              v-model="LoginFormData.username"
              :prefix-icon="User"
              placeholder="请输入用户名"
          /></el-form-item>
          <el-form-item prop="password"
            ><el-input
              v-model="LoginFormData.password"
              :prefix-icon="Lock"
              placeholder="请输入密码"
          /></el-form-item>
          <el-form-item prop="repassword"
            ><el-input
              v-model="LoginFormData.repassword"
              :prefix-icon="Lock"
              placeholder="请再次输入密码"
          /></el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register()"
              >注册</el-button
            ></el-form-item
          >
          <el-form-item>
            <h2 @click="goToLogin()">⬅返回</h2>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-aside {
  width: 50%;
  height: 100vh;
  background: url("@/assets/logo2.png") no-repeat center center/20vw auto,
    url("@/assets/login_bg.jpg") no-repeat 60% center / cover;
  border-radius: 0.5vw;
}

.el-form {
  width: 50%;
  margin: 10vw auto;
  /* height: 30vh; */
  background: white;
}
.el-form-item {
  width: 100%;
  height: 3vw;
  /* background-color: red; */
  margin-top: 1vw;
}
h1 {
  font-size: 1.5vw;
  line-height: 3vw;
  margin-left: 2vw;
}
.el-input {
  width: 100%;
  height: 100%;
  font-size: 1vw;
}
.el-checkbox {
  margin-left: 2vw;
}
.forget {
  color: #409eff;
  margin-left: 15vw;
  cursor: pointer;
}
.el-form-item .el-button {
  width: 100%;
  height: 100%;
  font-size: 1.3vw;
  letter-spacing: 1vw;
}
h2 {
  font-size: 1vw;
  color: gray;
  font-weight: normal;
  margin-left: 1vw;
}
h2:hover {
  cursor: pointer;
  color: rgb(152, 150, 150);
}
</style>
